<template>
  <div id="index">
    <mHeader></mHeader>

    <div id="body">
      <router-view class="index-view" @isTitle="getisTitel"></router-view>
    </div>

    <mFooter></mFooter>
  </div>
</template>

<script>
import mHeader from "@/components/mHeader";
import mFooter from "@/components/mFooter";
export default {
  name: "index",
  components: {
    mHeader,
    mFooter,
  },
  data() {
    return {
      title: "通讯录",
      nav: "home",
    };
  },
  methods: {
    getisTitel(t) {
      this.title = t.title || "通讯录";
      this.nav = t.nav || "home";
    },
  },
};
</script>

<style lang="scss" scoped>
#index {
  height: 100vh;
  width: 100vw;
  overflow-x: auto;
  overflow-y: auto;

  #body {
    display: flex;
    width: 100%;
    min-height: calc(100% - 100px);
    // overflow: hidden;
    // min-height: 1000px;

    .index-view {
      background-color: #eee;
      // padding: 20px 0;
      width: 100%;
      /* position: relative; */
      /* background-color:#fff; */
    }
  }
}
</style>